<template>
  <div id="table-full-screen">
    <el-form ref="formRef" :model="formData" :rules="rules" label-width="80px" :disabled="disabled">
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="标题" prop="title">
            <el-input v-model="formData.title" placeholder="请输入标题" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="副标题" prop="subtitle">
            <el-input v-model="formData.subtitle" placeholder="请输入副标题" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="描述" prop="desc">
            <el-input v-model="formData.desc" placeholder="请输入描述" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="浏览量" prop="views">
            <el-input type="number" v-model="formData.views" placeholder="请输入副标题" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="链接" prop="url">
            <el-input v-model="formData.url" placeholder="请输入链接" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="排序" prop="sort">
            <el-input type="number" v-model="formData.sort" placeholder="请输入排序" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="封面" prop="cover">
            <ArtImageUpload v-model:files="formData.cover"></ArtImageUpload>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="!!show">
          <el-form-item
            label="分类"
            prop="cate_id"
            :rules="{ required: true, message: '请输入分类', trigger: 'blur' }"
          >
            <el-select style="width: 200px" v-model="formData.cate_id">
              <el-option
                v-for="type in typeList"
                :key="type.id"
                :label="type.name"
                :value="type.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label="内容" prop="content">
        <ArtWangEditor v-model="formData.content" :disable="disabled"></ArtWangEditor>
      </el-form-item>
    </el-form>
    <div class="footer">
      <el-button type="primary" @click="submitForm" :disabled="disabled">确定</el-button>
      <el-button @click="reset" :disabled="disabled">重置</el-button>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { ElMessage, FormInstance, FormRules } from 'element-plus'
  import { ContentService } from '@/api/common'
  import { TypeService } from '@/api/common/type'
  import { useWorktabStore } from '@/store/modules/worktab'

  interface FormDataType {
    title: string
    subtitle: string
    desc: string
    views: number
    url: string
    sort: number
    cover: string
    content: string
    cate_id: string | number
    id?: string | number
  }
  const formData = reactive<FormDataType>({
    title: '',
    subtitle: '',
    desc: '',
    views: 1000,
    url: '',
    sort: 1,
    cover: '',
    content: '',
    cate_id: '' //食谱管理类型id
  })
  const disabled = ref(false)
  const pid = 24
  const typeList = ref<any>([])
  const show = ref<any>(0)

  const route = useRoute()
  const router = useRouter()
  const workTabStore = useWorktabStore()

  const rules = reactive<FormRules>({
    title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
    subtitle: [{ required: true, message: '请输入副标题', trigger: 'blur' }],
    desc: [{ required: true, message: '请输入描述', trigger: 'blur' }],
    cover: [{ required: true, message: '请选择封面', trigger: 'blur' }],
    content: [{ required: true, message: '请输入内容', trigger: 'blur' }],
    views: [{ required: true, message: '请输入浏览量', trigger: 'blur' }]
  })

  // 表单重置
  const reset = () => {
    formData.title = ''
    formData.subtitle = ''
    formData.desc = ''
    formData.views = 1000
    formData.url = ''
    formData.sort = 1
    formData.content = ''
    formData.cover = ''
    formData.id = ''
  }

  const setFormData = (data: any) => {
    formData.content = data.content
    formData.cate_id = data.cate_id
    formData.title = data.title
    formData.subtitle = data.subtitle
    formData.desc = data.desc
    formData.views = data.views
    formData.url = data.url
    formData.sort = data.sort
    formData.cover = data.cover
    formData.id = data.id
  }

  onMounted(() => {
    initFromData()
    getTypes()
  })

  // 获取分类
  const getTypes = async () => {
    const res = await TypeService.getChildCate(pid)
    typeList.value = res.data
  }

  // 获取详情
  const getFormData = async () => {
    const res = await ContentService.getContentDetail(formData.id)
    setFormData(res.data)
  }
  const initFromData = () => {
    const res = route.query
    formData.cate_id = parseInt(res.cate_id as string)
    formData.id = res.id as string
    show.value = res.show ? res.show : 0
    disabled.value = route.query.type === 'detail'
    if (route.query.type === 'add') {
      reset()
    } else {
      getFormData()
    }
  }

  // 表单提交
  const formRef = ref<FormInstance>()
  const submitForm = () => {
    if (!formRef.value) return
    formRef.value.validate(async (valid) => {
      if (valid) {
        if (route.query.type === 'add') {
          await ContentService.addContent(formData)
        } else {
          await ContentService.updateContent(formData)
        }
        ElMessage.success(route.query.type === 'add' ? '添加成功' : '更新成功')
        setTimeout(() => {
          router.back()
          workTabStore.removeTab(route.path)
        }, 1000)
      }
    })
  }
</script>
<style lang="scss">
  .footer {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px 0;
  }
</style>
